<template>
    <div class='my_container'>
        <div class="backdrop"></div>
        <div class="my_content">
            <div class="my_detail">
                <div class="avatar">
                    <img :src="sendData.avatar ? sendData.avatar : srcImg" alt="" style="border-radius: 50%;">
                </div>
                <div class="name_detail">
                    <span>用户名：{{userDetail.username }}</span>
                    <span> {{$t('wechat.phone')}}：{{ userDetail.displayname }}</span>
                    <span>默认地址：{{ userDetail.defaultcity }}</span>
                </div>
            </div>
        </div>
        <div class="line"></div>
    </div>
</template>

<script>
import { getUserDetailApi } from '@/api/addApp/beike_api.js'
export default {
    props: ['sendData'],
    data() {
        return {
            srcImg: require('@/assets/menuListLogo/com.lianjia.beike.png'),
            userDetail: {},
        };
    },
    components: {

    },
    created() {

    },
    mounted() {
        this.getUserDetail();
    },
    methods: {
        async getUserDetail() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: 1,
                limit: 1,
                uid: this.sendData.nick
            }
            try {
                let list = await getUserDetailApi(data);
                this.userDetail = list.data[0];
            } catch (error) {
                console.error(error);
            }
        }
    },
};
</script>

<style lang='scss' scoped>
.my_container {
    position: relative;

    .backdrop {
        background: linear-gradient(to bottom, #becce8, #fff);
        width: 100%;
        height: 200px;
    }

    .my_content {
        position: absolute;
        top: 50px;
        left: 7%;
        background-color: #fff;
        width: 86%;
        height: 150px;
        border-radius: 10px;
        padding: 20px;

        .my_detail {
            display: flex;

            .avatar {
                border-radius: 50%;
                width: 80px;
                height: 80px;
                overflow: hidden;

                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            .name_detail {
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;

            }
        }
    }

    .line {
        height: 1px;
        width: 100%;
        background-color: #92b4f8;
        margin-top: 10px;
    }
}
</style>